<template>
	<view class="content">
		<view id="container">

		</view>
		<view class="return" @click="toReturn()" style="z-index: 999;background: white;">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<!-- <view class="tabs">
		
			<view class="tabsItem" @click="toPoint(1)">
				<image src="/static/point/icon3.png"></image>
				<view>场馆</view>
			</view>
			<view class="tabsItem" @click="toPoint(2)">
				<image src="/static/point/icon2.png"></image>
				<view>景点</view>
			</view>
			<view class="tabsItem" @click="toPoint(3)">
				<image src="/static/point/icon6.png"></image>
				<view>酒店</view>
			</view>
			<view class="tabsItem" @click="toPoint(6)">
				<image src="/static/point/icon7.png"></image>
				<view>美食</view>
			</view>
			<view class="tabsItem" @click="toPoint(4)">
				<image src="/static/point/icon4.png"></image>
				<view>停车场</view>
			</view>
			<view class="tabsItem" @click="toPoint(5)">
				<image src="/static/point/icon5.png"></image>
				<view>公共厕所</view>
			</view>
		</view> -->
		<!-- <cover-view class="tabs" @touchmove.prevent.stop="noop" catchtouchmove>
			<cover-image mode="widthFix" src="/static/point/icon1.png" @click="toPoint(1)"></cover-image>
		</cover-view> -->
	</view>
</template>

<script>
	import {
		scenicList,
		culturalList,
		parkadeList,
		hotelList,
		toiletList,
		wechatLogin,
		userDetail,
		config,
		gourmetList
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				map: null,
				marker: null,
				markerS: null,
				markerSArr: [],
				mask: '',
				mark2: null,
				mark1: null,
				list: [],
				list2: [],
				list3: [],
				list4: [],
				list5: [],
				info: '',
				mark1Arr: [],
				appid: ''
			};
		},
		onLoad() {
			const type = uni.getSystemInfoSync().uniPlatform
			if (type == 'mp-weixin') {
				console.log('在小程序内');
			} else {
				this.getInfo()
				// this.checkWeChatCode()
			}
		},
		mounted() {
			this.initQQMap();
		},
		methods: {
			async getConfig() {
				const result = await config()
				if (result.code == 1) {
					this.appid = result.data.appId
					this.checkWeChatCode()
				} else {

				}
			},
			async getInfo() {
				const result = await userDetail()
				if (result.code == 10000 || result.code == 20003) {
					this.getConfig()
					// this.wxLogin()
				} else if (result.code == 1) {
					this.info = result.data
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			wxLogin() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				let appid = this.appid
				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				let href = "https://ncymkj.doudou00.com/get-weixin-code.html?appid=" + appid +
					"&response_type=code&state=123456&redirect_uri=" + local + "#wechat_redirect"
				console.log(href)
				window.location.href = href
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				if (code) {
					// uni.showToast({
					// 	title: `微信code=${code}`
					// })
					this.getOpenidAndUserinfo(code)
				} else {
					this.wxLogin()
					// this.getInfo()
				}
			},
			//方法：用来判断是否是微信内置的浏览器
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
				[, ''
				])[1].replace(/\+/g, '%20')) || null
			},
			async getOpenidAndUserinfo(code) {
				this.show = true
				const result = await wechatLogin({
					code: code
				})
				if (result.code == 1) {
					uni.setStorageSync('token', result.data.token);
					this.getInfo()
					this.sendData({
						type: 'user_auth',
						token: result.data.token,
					});
				} else {
					// uni.showToast({
					// 	title: result.msg,
					// 	icon: 'error'
					// });
				}
			},
			toReturn() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			noop() {

			},
			initQQMap() {
				const that = this;
				that.map = new TMap.Map('container', {
					center: new TMap.LatLng(28.665691, 116.034318),
					zoom: 12,
					zIndex: 2
				});
				var imageSW = new TMap.LatLng(28.582365, 115.946647); //西南 左下
				// var imageSW = new TMap.LatLng(28.584207, 115.946944); //西南 左下
				var imageNE = new TMap.LatLng(28.808627, 116.328087); // 东北角 右上
				// var imageNE = new TMap.LatLng(28.808542, 116.222423); // 东北角 右上
				var imageLatLngBounds = new TMap.LatLngBounds(imageSW, imageNE);
				var imageGroundLayer = new TMap.ImageGroundLayer({
					bounds: imageLatLngBounds,
					src: './static/map.png',
					// src: 'https://gxtravel.ncscloudmedia.com/uploads/png/20250701/fb0542dd3471f6cd78914dec3fc15e1f.png',
					map: that.map,
				});
				that.mask = new TMap.MaskLayer({
					map: that.map,
					geometries: [],
				});
				that.addMaskLayer()
				that.toPoint(1)
				setTimeout(()=>{
					that.toPoint(2)
				},400)
				setTimeout(()=>{
					that.toPoint(6)
				},800)
				setTimeout(()=>{
					that.toPoint(7)
				},1200)
				// that.toPoint(4)
			},
			// 获取列表
			async getList1(n) {
				let result = ''
				let url = ''
				if (n == 1) {
					// 景点
					result = await culturalList({
						page: 1,
						size: 50
					})
					url = '/pages/cultural/detail?id='
				}
				if (n == 2) {
					// 景点
					result = await scenicList({
						page: 1,
						size: 50,
						category_id: 1
					})
					url = '/pages/scenic/detail/detail?id='
				}
				if (n == 3) {
					// 酒店
					result = await hotelList({
						page: 1,
						size: 50
					})
					url = '/pages/hotel/detail/detail?id='
				}
				if (n == 4) {
					// 停车场
					result = await parkadeList({
						page: 1,
						size: 50
					})
					url = '/pages/park/park?id='
				}
				if (n == 5) {
					// 公共厕所
					result = await toiletList({
						page: 1,
						size: 50
					})
					url = '/pages/toilet/toilet?id='
				}
				if (n == 6) {
					// 美食
					result = await gourmetList({
						page: 1,
						size: 50,
						category_id: 2
					})
					url = '/pages/restaurant/detail/detail?id='
				}
				if (n == 7) {
					// 美食
					result = await gourmetList({
						page: 1,
						size: 50,
						category_id: 9
					})
					url = '/pages/restaurant/detail/detail?id='
				}
				if (result.code == 1) {
					let list = result.data.list
					let that = this
					that.list = result.data.list
					list.forEach(item => {
						that.markerS = new TMap.MultiMarker({
							map: that.map,
							styles: {
								// 点标记样式
								marker: new TMap.MarkerStyle({
									width: 40, // 样式宽
									height: 40, // 样式高
									anchor: {
										x: 0,
										y: 0
									}, // 描点位置
									offset: {
										x: 0,
										y: 35
									},
									size: 10, // 标注点文本文字大小
									color: '#fff', // 字体颜色
									backgroundColor: '#00AF91', // 文本背景颜色
									backgroundBorderRadius: 24, // 文本背景框圆角
									padding: '5px 15px', // 标注点文字背景框内边距
									src: item.map_logo,
									// src: './static/logo.png',
									// src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
									// enableRelativeScale: true, //是否开启相对缩放
								}),
							},
							geometries: [
								// 点标记数据数组
								{
									content: item.name,
									styleId: 'marker',
									// 标记位置(纬度，经度，高度)
									position: new TMap.LatLng(item.latitude, item.longitude),
									id: url + item.id,
								},
							],
						});
						that.markerS.on("click", that.eventClick)
						that.markerSArr.push(that.markerS)
						that.getPoint(n)
					})
				} else {
					uni.showToast({
						title: result.msg,
						icon: "error"
					})
				}
			},
			getPoint(n) {
				let that = this
				let arr = []
				let path = ''
				let zoom = 10
				if (n == 1) {
					that.list.forEach(item => {
						arr.push({
							id: '/pages/cultural/detail?id=' + item.id,
							idS: item.id,
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					path = './static/point/icon3.png'
					// zoom = 12
				}
				if (n == 2) {
					that.list.forEach(item => {
						arr.push({
							id: '/pages/scenic/detail/detail?id=' + item.id,
							idS: item.id,
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					path = './static/point/icon2.png'
					// zoom = 12
				}
				if (n == 3) {
					that.list.forEach(item => {
						arr.push({
							id: '/pages/hotel/detail/detail?id=' + item.id,
							idS: item.id,
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					path = './static/point/icon6.png'
					// zoom = 12
				}
				if (n == 4) {
					that.list.forEach(item => {
						arr.push({
							id: '/pages/park/park',
							idS: item.id,
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					path = './static/point/icon4.png'
					// zoom = 12
				}
				if (n == 5) {
					that.list.forEach(item => {
						arr.push({
							id: '/pages/toilet/toilet',
							idS: item.id,
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					path = './static/point/icon5.png'
					// zoom = 12
				}
				if (n == 6) {
					that.list.forEach(item => {
						arr.push({
							id: '/pages/restaurant/detail/detail?id=' + item.id,
							idS: item.id,
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					path = './static/point/icon7.png'
					// zoom = 12
				}
				if (n == 7) {
					that.list.forEach(item => {
						arr.push({
							id: '/pages/restaurant/detail/detail?id=' + item.id,
							idS: item.id,
							styleId: 'small', // 对应中的样式id
							position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置
						})
					})
					path = './static/point/icon7.png'
					// zoom = 12
				}
				that.mark1 = new TMap.MultiMarker({
					map: that.map, // 显示Marker图层的底图
					styles: {
						small: new TMap.MarkerStyle({
							// 点标注的相关样式
							width: 20, // 宽度
							height: 20, // 高度
							// enableRelativeScale: true, //是否开启相对缩放
							anchor: {
								x: -10,
								y: 10
							}, // 标注点图片的锚点位置
							src: path, // 标注点图片url或base64地址
						}),
					},
					enableCollision: true, // 开启碰撞
					geometries: arr
				});
				that.mark1.on("click", that.eventClick)
				that.mark1Arr.push(that.mark1)
				console.log(arr[0].position)
				// that.map.panTo(new TMap.LatLng(that.list[0].latitude, that.list[0].longitude))
				// that.map.setCenter(arr[0].position);
				// new TMap.LatLng(28.666279,116.121734)
				// 28.678842,116.174369
				// that.map.easeTo({
				// 	center:arr[0].position,
				// 	zoom: zoom,
				// 	rotation: 0
				// }, {
				// 	duration: 1000
				// });
				//平滑缩放,旋转到指定级别
				// that.map.setZoom(zoom);
			},
			addMaskLayer() {
				var paths = [
					new TMap.LatLng(28.771669, 115.970805),
					new TMap.LatLng(28.777128, 116.317997),
					new TMap.LatLng(28.544882, 116.247158),
					new TMap.LatLng(28.592056, 115.840803)
				];
				this.mask.add([{
					id: 'mask-layer',
					paths: paths,
				}]);
			},
			eventClick(e) {
				console.log(e)
				// let url = e.geometry.id
				// uni.navigateTo({
				// 	url: url
				// })

			},
			toPoint(n) {
				// console.log(n)
				let that = this
				// that.removeMarker()

				that.getList1(n)
			},
			//移除marker事件
			removeMarker() {
				console.log(this.markerSArr)
				if (this.markerSArr.length != 0) {
					this.markerSArr.forEach(item => {
						item.setMap(null);
						item = null;
					})
				}
				if (this.mark1Arr.length != 0) {
					this.mark1Arr.forEach(item => {
						item.setMap(null);
						item = null;
					})
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	#container {
		width: 100%;
		position: absolute;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.tabs {
		position: absolute;
		left: 0rpx;
		background: white;
		bottom: 50rpx;
		border-radius: 10rpx;
		box-shadow: 1rpx 2rpx 10rpx 1rpx gray;
		z-index: 999;
		font-size: 24rpx;
		color: #3E4059;
		padding: 10rpx 10rpx;
		text-align: center;

		image {
			width: 50rpx;
			height: 50rpx;
		}

		.tabsItem {
			margin-bottom: 16rpx;
			box-shadow: 1rpx 2rpx 10rpx 1rpx gainsboro;
			padding: 10rpx;
		}
	}
</style>